<!-- Created Time:23/07/20 11:05:59 -->
<!-- Created By: Mande.Huang-->
<!-- Description: 下方程序坞 的单个文件 -->
<template>
  <div class="navFolder" @click="updateShowFolder">
    <img :src="require(`/src/assets/folder-icons/${folder.icon}.svg`)" width="15px" :alt="folder.title" />
    <p>
      {{
        folder.title.length > 18
        ? folder.title.slice(0, 17) + "..."
        : this.folder.title
      }}
    </p>
  </div>
</template>

<script>
import { getFolders, updateShowFolder } from '@/helpers/folders';

export default {
  name: "NavFolder",
  props: {
    folder: {
      required: true,
      type: Object,
    },
  },
  data() {
    return {

    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    updateShowFolder() {
      updateShowFolder(this.folder.path);
      this.$store.dispatch("fetchFolders", getFolders());
    }
  },
}
</script>
<style lang="scss" scoped>
.dark .navFolder {
  color: #e9e9e9;

  &:hover {
    background: #333;
  }
}

.navFolder {
  height: 30px;
  min-width: 180px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  user-select: none;
  font-size: 14px;
  overflow: hidden;
  transition: 300ms;

  &:hover {
    background: #ccc;
  }

  *::selection {
    background: none;
  }

  img {
    margin-right: 10px;
  }
}</style>
